<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <title>Business Scenarios</title>
</head>
<body>
	<script type="text/javascript">
		var current_host = "http://127.0.0.1:8888";

		window.onload = function addCells() {
			//请求参数
			var list = {};
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json; charset=utf-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/scenarios",
				headers:{
					'Content-Type':'application/json;charset=utf8',
				},
				beforeSend: function(xhr) {
                        xhr.setRequestHeader("Access-Control-Allow-Origin",xhr.getResponseHeader("Origin"));
						xhr.setRequestHeader("Access-Control-Allow-Methods", "*");
						xhr.setRequestHeader("Access-Control-Allow-Credentials", "true");
						xhr.setRequestHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token");
                    },
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					for (var i = result.length - 1; i >= 0; i--) {
						scenariosId = result[i].id;
						scenariosName = result[i].scenarios_name;
						systemName = result[i].system_name;

						var table = document.getElementById("dataTable");
						var row = table.insertRow(1);

						var idCell = row.insertCell(0);
                        var nameCell = row.insertCell(1);
						var systemNameCell = row.insertCell(2);
                        var operateCell = row.insertCell(3);

						idCell.innerHTML = scenariosId;
						nameCell.innerHTML = scenariosName;
						systemNameCell.innerHTML = systemName;
						operateCell.innerHTML = "<input id=\"cell" + scenariosId + "\" type=\"submit\" value=\"View\" onclick=\"viewScenarios(this)\"/>&nbsp;<input id=\"cell" + scenariosId + "\" type=\"submit\" value=\"Delete\" onclick=\"deleteScenarios(this)\"/>&nbsp;<input id=\"run" + scenariosId + "\" type=\"submit\" value=\"RunCase\" onclick=\"runScenarios(this)\"/>"
	
					}
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});
		}
	
		function addScenarios(){
			window.location=current_host + "/uitest/scenariosPage/add";
		}

		function deleteScenarios(btn) {
			location.href(current_host + "/uitest/scenariosPage/add");
		}

        function viewScenarios(btn){

			var scenariosID=$(btn).attr("id").substring(4,)
			localStorage.setItem("scenariosID", scenariosID)
			console.log("scenariosID:" + scenariosID)
			window.location.href = current_host + "/uitest/scenarios/detail"
        }

		function runScenarios(btn){
			console.log($(btn).attr("id"));
			//请求参数
			var list = {
				"scenariosID": $(btn).attr("id").substring(3,)
			};
			//获取浏览器页面可见高度和宽度
			var _PageHeight = document.documentElement.clientHeight,
				_PageWidth = document.documentElement.clientWidth;
			//计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
			var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
				_LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
			//在页面未加载完毕之前显示的loading Html自定义内容
			var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:0.8;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url(/images/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">Running Cases，Please wait a moment... &nbsp;&nbsp;</div></div>';
			//呈现loading效果
			document.write(_LoadingHtml);
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : current_host + "/uitest/caseRunner/runScenarios",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					window.location.href = current_host + "/uitest/scenariosPage";
					window.open("/Users/pengkaifeng/PycharmProjects/UITestProj/UICaseRunner/beautiful_filename.html","_blank").location;

				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
					window.location.href = current_host + "/uitest/scenariosPage"
				}
			});
		}
	</script>
<div>
	<div id="headerMenu" style="width: 80%; margin-left: 10%; margin-top: 30px">
		<table id="headerMenuTable" width="100%" border="1" cellspacing="0" cellpadding="0">
			<tr>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)">modelsPage</th>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)">pagesPage</th>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)" onclick="jumpPage(this)">elementsPage</th>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)">scenariosPage</th>
  			</tr>
		</table>
	</div>
	<div>
	    <div id="headerView" style="width: 80%; margin-left: 15%; margin-top: 30px">
	        Scenarios Name:
	        <input type="text" name="modelName" placeholder="please input" />
	    </div>
	    <div id="addBtn" style="float: right; margin-right: 15%">
	    	<button onclick="addScenarios()">Add</button>
	    </div>
	</div>
	<div id="tableView" style="text-align:center;margin-top: 50px; margin-left: 15%">
		<table id="dataTable" width="90%" border="1" cellspacing="0" cellpadding="0">
			<tr>
                <th width="5%" height="35" align="center" bgcolor="rgba(238,238,238,1)">ID</th>
                <th width="45%" height="35" align="center" bgcolor="rgba(238,238,238,1)">ScenariosName</th>
                <th width="20%" height="35" align="center" bgcolor="rgba(238,238,238,1)">System</th>
    			<th width="30%" height="35" align="center" bgcolor="rgba(238,238,238,1)">Operator</th>
  			</tr>
		</table>
	</div>

</div>
</body>
</html>